<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 导入vue脚本 -->
		<script src="./lib/vue-2.6.12.js"></script>
		<title>指令集 and 过滤器</title>
	</head>
	<body>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="内容渲染指令">
			<!-- 内容渲染指令 -->
			<div id="app1">
				<!-- {{}} 插值式，不会覆盖原值 -->
				<p>{{v_str}}</p>
				<!-- v-text 会覆盖原值 -->
				<p v-text="v_str">被覆盖的文本</p>
				<!-- v-html用于渲染html标签 -->
				<p v-html="v_span">被覆盖的文本</p>
				<p>{{v_str+'和 Javascript 表达式的运算'}}</p>
				<p>1+1={{1+1}}</p>
			</div>
			<script>
				//创建vue实例对象
				const vm1 = new Vue({
			
					//获取控制元素
					//如果选择获取标签名（如p、div……）则只会获取找到的第一个元素
					//el: 'p',
					el: '#app1',
			
					//制定model数据源
					data: {
						// 内容渲染指令
						v_index: 3,
						v_str: '测试文本（内容渲染指令）1',
						v_span: '<span style="color:red;font-size:16px;">测试标签（内容渲染指令）2</span>'
			
					}
				})
			</script>
		</div>
	
		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="属性绑定指令">
			<!-- 属性绑定指令 -->
			<div id="app2">
				<input type="text" v-bind:placeholder="inputDefValue1" />
				<br />
				<input type="text" :placeholder="inputDefValue2" />
				<br />
				<div :title="'divTitle'+index">动态绑定，鼠标指向我</div>
			</div>
			<script>
				new Vue({
					el: '#app2',
					data: {
						index: '1',
						inputDefValue1: '（属性绑定指令）',
						inputDefValue2: '（属性绑定指令，第二种写法）'
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="事件绑定指令">
			<!-- 事件绑定指令 -->
			<div id="app3">
				<button v-on:click="count_001++">{{str_01}}{{count_001}}</button>
				<br />
				<button v-on:click="on_click_01">{{str_01}}{{count_01}}</button>
				<br />
				<button @click="on_click_02(2)">{{str_02}}{{count_02}}</button>
				<br />
				<!-- 当参数列表有其他参数时，需要用显示$event -->
				<button @click="on_click_03(1.5,$event)">{{str_03}}{{count_03}}</button>
				<br />
				<!--事件修饰符
				.prevent 阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）
				.stop    阻止事件冒泡(事件冒泡：当父子元素都有click事件时，点击子元素也会触发父元素的click事件)
				.capture 以捕获模式触发当前的事件处理函数
				.once    绑定的事件只触发1次
				.self    只有在 event.target 是当前元素自身时触发事件处理函数 -->
				<a href="www.baidu.com" title="阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）"
					@click.prevent="on_click_04">www.baidu.com</a>
				<br />
				<div style="width: 200px;background-color: chocolate;height: 50px;" title="未使用.stop,会引起事件冒泡"
					@click="on_click_04">
					<button @click="count_04++">{{str_03}}{{count_04}}</button>
				</div>
				<br />
				<div style="width: 200px;background-color: chocolate;height: 50px;" title="使用.stop,不会引起事件冒泡"
					@click="on_click_04">
					<button @click.stop="count_05++">{{str_03}}{{count_05}}</button>
				</div>

				<!-- 加按键修饰符 -->
				<!-- @keyup.enter 回车按键按下 -->
				<!-- {
					"enter" : "回车键",
					"esc"   : "esc键"，
					"space" : "空格"
					"a,b,……": "字母键等"
					""      : "后边不加东西，单一个@keyup，则相应所有按键"
				} -->
				<input type="text" @keyup.esc="keyupEsc" @keyup.enter="keyupEnter">


			</div>
			<script>
				new Vue({
					el: '#app3',
					data: {
						count_001: 0,
						count_01: 0,
						count_02: 0,
						count_03: 0,
						count_04: 0,
						count_05: 0,
						str_01: '点击次数：',
						str_02: '点击次数X2：',
						str_03: '点击切换本按钮颜色',
					},
					methods: {
						on_click_01() {
							this.count_01 += 1;
						},
						//接收事件参数对象event，简写为e
						on_click_02(num) {
							this.count_02 += num;
						},
						on_click_03(num, e) {
							this.count_03 += num;
							e.target.style.backgroundColor = e.target.style.backgroundColor === 'red' ? 'green' : 'red';
						},
						on_click_04(e) {
							e.target.style.backgroundColor = e.target.style.backgroundColor === 'red' ? 'green' : 'red';
						},
						keyupEsc() {
							console.log('keyupEsc');
						},
						keyupEnter(e) {
							e.target.style.backgroundColor = e.target.style.backgroundColor === 'red' ? 'green' : 'red';
							console.log('keyupEnter');
						}
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="双向绑定指令">
			<!-- 双向绑定指令 -->
			<div id="app4">
				<p>input中的值：{{str_01}}</p>
				<!-- v-model指令修饰符(可叠加)
				.number 自动将用户的输入值转为数值类型 
				.trim 自动过滤用户输入的首尾空白字符 
				.lazy 在“change”时而非“input”时更新 -->
				<input type="text" v-model.lazy.trim.number="str_01">

				<p>select中的值：{{city}}</p>

				<select v-model="city">
					<option value="">请选择城市</option>
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="广州">广州</option>
				</select>

			</div>
			<script>
				new Vue({
					el: '#app4',
					data: {
						str_01: "绑定元素内容",
						city: ""
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="条件渲染指令">
			<!-- 条件渲染指令 -->
			<div id="app5">
				
				<!-- v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏 -->
				<p v-show="isShow">显示本文本</p>
				
				<!-- v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏                  -->
				<p v-if="cityFlag==1"     >北京</p>
				<p v-else-if="cityFlag==2">上海</p>
				<p v-else-if="cityFlag==3">广州</p>
				<p v-else                 >杭州</p>
			</div>
			<script>
				new Vue({
					el: '#app5',
					data: {
						isShow   : true,
						cityFlag : 2
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="列表渲染指令">
			<!-- 列表渲染指令 -->
			<div id="app6">
				
				
				<!-- 添加用户的区域 -->
				    <div>
				      <input type="text" v-model="id" placeholder="请输入id">
					  <input type="text" v-model="name" placeholder="请输入name">
				      <button @click="addNew">添加</button>
				    </div>
				
				<table>
				    <thead>
						<th>索引</th>
						<th>Id</th>
				        <th>姓名</th>
				    </thead>
				    <tbody>
				        <tr v-for="(item, index) in list_01" :key="item.id" >
							<td><input type="checkbox" v-model="item.status" /></td>
							<td>{{ index+1 }}</td>
							<td>{{ item.id }}</td>
							<td>{{ item.name }}</td>
				        </tr>
				    </tbody>
				</table>
			</div>
			<script>
				new Vue({
					el: '#app6',
					data: {
						id: '',
						name: '',
						list_01: [
							{id:'1',name:'aa',status:true },
							{id:'2',name:'bb',status:true },
							{id:'3',name:'cc',status:false }
						]
					},
					methods: {
					    // 点击了添加按钮
					    addNew() {
					      this.list_01.unshift({ id: this.id, name: this.name,status: false });
					      this.name = '';
					      this.id = '';
					    }
					}
				})
			</script>
		</div>

		<div style="margin: 5px;display:inline-block;background-color: burlywood;" title="过滤器">
			<!-- 过滤器 -->
			<div id="app7">
				
				<!-- 多过滤器调用顺序：从左向右 -->
				<p>{{ str_01 | filter_01 | filter_ALL_01(5) }}</p>
				
				<input type="text" :placeholder="str_01 | filter_01" />
				
			</div>
			<script>
				//全局过滤器（len默认值6，默认值可选）要声明在前面
				Vue.filter('filter_ALL_01', (str,len=6) => {
					//第二个字母大写
					return str.slice(0,len);
				});
			</script>
			<script>
				new Vue({
					el: '#app7',
					data: {
						str_01:'abcdefg'
					},
					// filters节点用于定义过滤器,Vue2支持，Vue3不支持
					filters:{
						//私有过滤器
						filter_01(str){//首字母大写
							return str.charAt(0).toUpperCase() + str .slice(1);
						}
					}
				});
			</script>
		</div>
		

	</body>
</html>
